<template>
	<view class="wrap">
		<!-- 活动基础信息 -->
		<template>
			<view>
				<view class="topTips">
					<text class="activity-status" v-if="tipsShow">已发送到优惠券卡包</text>
					<text class="activity-status">{{activityStatusStr}}</text>
				</view>
				<view class="box">
					<view class="basics">
						<text class="basics_title">订单编号:</text>
						<text class="basics_value">{{orderDetail.orderNo}}</text>
					</view>
					<view class="basics">
						<text class="basics_title">活动名称:</text>
						<text class="basics_value">{{orderDetail.activityName}}</text>
					</view>
					<view class="basics">
						<text class="basics_title">活动类型:</text>
						<text class="basics_value">{{activityTypeStr}}</text>
					</view>
					<view class="basics">
						<text class="basics_title">活动时间:</text>
						<text class="basics_value"
							v-if="orderDetail.activityEndTime">{{orderDetail.activityStartTime}}至{{orderDetail.activityEndTime}}</text>
						<text class="basics_value" v-else>长期有效</text>
					</view>
					<view class="basics">
						<text class="basics_title">组团发起时间:</text>
						<text class="basics_value">{{orderDetail.groupStartTime}}</text>
					</view>
					<view class="basics">
						<text class="basics_title">组团完成时间:</text>
						<text class="basics_value">{{orderDetail.groupEndTime}}</text>
					</view>
					<view class="basics">
						<text class="basics_title">组团人数:</text>
						<text class="basics_value">{{orderDetail.groupPeople}}人</text>
					</view>
				</view>
			</view>
		</template>

		<!-- 奖品卡劵 -->
		<template v-if="orderDetail.shoppVoList.length>0">
			<view>
				<view class="sectionTitle">奖品</view>
				<view class="box">
					<view class="prize">

						<view style="display: flex; justify-content: space-between;" v-if="isPhysical">
							<text class="prize_status">{{prizeStatus}}</text>
							<text @click="showDialog" v-if="orderDetail.activityStatus == 1"
								class="prize_status" style="color: #12B9A3;">兑换码</text>
						</view>

						<view class="prize_item" v-for="(item, index) in orderDetail.shoppVoList" :key="index">
							<text class="prize_name">{{item.shoppingName}}</text>
							<text class="prize_name">--{{item.serviceType == 1 ? '实物' : '卡劵'}}</text>
							<text class="prize_num">数量: {{item.shoppingNum}}</text>
						</view>
					</view>
				</view>
			</view>
		</template>


		<!-- 活动门店 -->
		<template v-if="orderDetail.activityUnit.length>0">
			<view>
				<view class="sectionTitle">活动门店</view>
				<view class="box" v-for="(item, index) in orderDetail.activityUnit" :key="index">
					<view class="store">
						<view class="store_name">{{item.applicableUnit}}</view>
						<view class="store_address">{{filterNull(item.unitAddress)}}</view>
						<view class="store_other">
							<view class="distanceWrap">
								<text class="value">{{filterNull(item.distance)}}km</text>
								<text class="title">距离</text>
							</view>

							<view class="">
								<image @click="callPhone(item.unitPhone)" class="icon-image"
									src="../../static/coupon/callPhone.png" mode=""></image>
								<image @click="navi(item)" class="icon-image"
									src="../../static/coupon/map-navigation.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</template>

		<template>
			<view class="descWrap">
				<view v-if="orderDetail.writeOffTime" class="desc">兑奖时间：{{orderDetail.writeOffTime}}</view>
				<view v-if="orderDetail.activityStatus == 4" class="desc">截止时间：{{orderDetail.activityEndTime}}</view>
				<view v-if="orderDetail.remark" class="desc">说明：{{orderDetail.remark}}</view>
				<view v-if="orderDetail.storeName" class="desc">核销门店：{{orderDetail.storeName}}</view>
			</view>
		</template>

		<u-popup :show="redeemCodeShow" mode="center" @close="dismissDialog" :closeable="true" round="10">
			<view class="codeBg">

				<image class="qrcode_pop" :src="path" mode="scaleToFill"></image>

				<!-- <uqrcode ref="uQRCode" mode="view" style="margin-top: 80upx;" size="180" :text="orderDetail.orderNo" /> -->
				<text style="margin-top: 30upx;">{{'('+ orderDetail.orderNo+')'}}</text>
				<text style="margin-top: 40upx;">请到店出示二维码进行消费</text>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		peerOrderInfo,
		coupongenerate
	} from '../../common/api.js'
	export default {
		data() {
			return {
				orderNo: '',
				lat: 0,
				lon: 0,
				orderDetail: {},
				activityTypeStr: '',
				activityStatusStr: '',
				prizeStatus: '',
				tipsShow: false,
				redeemCodeShow: false,
				isPhysical: false,
				path:''
			}
		},
		onLoad(op) {
			this.orderNo = op.orderNo;
			this.getLocation();
		},
		methods: {
			//获取定位信息
			getLocation() {
				uni.getLocation({
					type: 'wgs84',
					success: (res => {
						this.lat = res.latitude;
						this.lon = res.longitude;
						this.getOrderDetail();
					}),
					fail: (e => {
						this.getOrderDetail();
					})
				});
			},
			
			getQrcode(){
				coupongenerate({
					businessId:this.orderDetail.orderNo,
					codeType:1
				}).then(res=>{
					this.path = this.baseImageUrl+res.path;
				})
			},
			
			showDialog(){
				this.redeemCodeShow=true
			},
			dismissDialog(){
				this.redeemCodeShow=false
			},
			
			getOrderDetail() {
				let that = this;
				peerOrderInfo({
					bizNo: that.orderNo,
					lat: that.lat,
					lon: that.lon
				}).then(res => {
					this.orderDetail = res;
					let activityType = this.orderDetail.activityType;
					switch (activityType) {
						case 1:
							this.activityTypeStr = '秒杀活动';
							break
						case 2:
						 this.activityTypeStr = '集客活动'
							break
						case 3:
							this.activityTypeStr = '同行活动'
							break
						case 4:
							this.activityTypeStr = '抽奖活动'
							break
						default:
							this.activityTypeStr = '未知'
							break
					}

					let activityStatus = this.orderDetail.activityStatus;
					switch (activityStatus) {
						case 1:
							this.activityStatusStr = '未使用';
							this.prizeStatus = '待兑换';
							break
						case 2:
							this.activityStatusStr = '已使用'
							this.prizeStatus = '已兑换';
							break
						case 3:
							this.activityStatusStr = '已过期';
							this.prizeStatus = '已过期';
							break
						case 4: //同行活动不可能存在取消
							this.activityStatusStr = '已取消'
							this.prizeStatus = '已取消';
							break
						case 5: //同行活动不可能存在退款
							this.activityStatusStr = '已退款'
							break
						default:
							this.activityStatusStr = '未知'
							break
					}

					//查找奖品中是否有实物.有实物显示兑换码,没有实物不显示兑换码
					if (activityStatus == 1 && this.orderDetail.shoppVoList.length > 0) {
						for (let shop of this.orderDetail.shoppVoList) {
							if (shop.serviceType == 1) { //判断是否有实物
								this.isPhysical = true;
							}
							if (shop.serviceType == 2) { //判断是否有卡卷
								this.tipsShow = true;
							}
						}
					}

					this.getQrcode();
				})
			},

			callPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone,
					success: (res) => {
						console.log('拨打电话成功');
					}
				})
			},
			navi(item) {
				uni.openLocation({ //​使用微信内置地图查看位置。
					latitude: item.unitLat, //要去的纬度-地址
					longitude: item.unitLon, //要去的经度-地址
					name: item.applicableUnit,
					address: item.unitAddress,
					success() {
						console.log('成功了');
					},
					fail(msg) {
						console.log(msg)
					}
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		padding: 0 24upx;
	}

	.topTips {
		display: flex;
		justify-content: space-between;
		padding: 35upx 0;

	}

	.activity-status {
		font-size: 32upx;
		font-weight: bold;
		color: #12b9a3;
	}

	.box {
		background-color: #fff;
		border-radius: 16upx;
		padding: 15upx 0;
		box-shadow: 0 0 0 NaNpx #000000;
	}

	.basics {
		padding: 10upx 25upx;
	
	&_title {
			font-size: 28upx;
			font-family: PingFang SC, PingFang SC-Medium;
			text-align: left;
			color: #999;
		}

		&_value {
			font-size: 28upx;
			font-family: PingFang SC, PingFang SC-Medium;
			text-align: left;
			color: #333;
			margin-left: 20upx;
		}
	}

	.sectionTitle {
		font-size: 28upx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: bold;
		color: #333;
		margin: 40upx 20upx 30upx 15upx;
	}

	.prize {
		padding: 10upx 25upx;
		position: relative;
	
	&_status {
			margin: 15upx 0;
			font-size: 26upx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: bold;
			text-align: left;
			color: #666666;
		}

		&_item {
			margin-bottom: 10upx;
		}

		&_name {
			color: #333333;
			font-size: 26upx;
			font-weight: bold;
		}

		&_num {
			color: #333333;
			font-size: 26upx;
			font-weight: bold;
			// margin-left: 100upx;
			position: absolute;
			right: 100upx;
		}
	}

	.store {
		padding: 10upx 25upx;

		&_name {
			font-size: 26upx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: bold;
			color: #333;
			margin-top: 20upx;
		}

		&_address {
			font-size: 24upx;
			font-family: PingFang SC, PingFang SC-Medium;
			font-weight: bold;
			color: #999;
			margin-top: 20upx;
		}

		&_other {
			margin: 20upx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}

	.distanceWrap {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.title {
		font-size: 22upx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: bold;
		text-align: center;
		color: #999999;
	}

	.value {
		font-size: 26upx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: bold;
		text-align: left;
		color: #333333;
		margin-bottom: 10upx;
	}


	.icon-image {
		width: 34upx;
		height: 34upx;
		margin-left: 70upx;
	}

	.descWrap {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
		margin: 50upx 20upx;

	}

	.desc {
		font-size: 28upx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: bold;
		text-align: left;
		margin-bottom: 15upx;
		color: #999999;
	}


	.codeBg {
		width: 650upx;
		height: 700upx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.qrcode_pop {
		width: 415upx;
		height: 415upx;
		margin-top: 60upx;
	}
</style>
